<template>
  <view
    class="chatExamCard"
    :class="{
      chatExamCardOther: data.from === KKConversationFrom.other,
      chatExamCardNoPhotoResult: data.isPhonePhoto && !currentExamData(),
    }"
    :style="{ width: width }"
  >
    <view v-if="data.isPhonePhoto" class="chatExamCard-phonePhoto">
      <view v-if="!currentExamData()" class="chatExamCard-phonePhoto-noResult">
        <image src="@/pagesA/static/images/exam/photo_empty.png"></image>
        <view class="chatExamCard-phonePhoto-noResult-text">无拍搜结果～</view>
      </view>
      <view
        v-if="currentExamData() && tabs && tabs.length > 1"
        class="chatExamCard-phonePhoto-tab"
      >
        <view
          class="item"
          v-for="(value, index) in tabs"
          :key="index"
          :class="{ itemSelect: index == tabIndex }"
          @tap="tabsClick(value)"
        >
          {{ value.name }}
        </view>
      </view>
      <scroll-view
        v-if="currentExamData() && !currentExamData().aiReplayHtml"
        class="chatExamCardScrollView"
        scroll-y="true"
        enable-flex="true"
        scroll-with-animation="true"
      >
        <ExamCard :isFromConversation="true" :data="currentExamData()" />
      </scroll-view>
      <ua-markdown
        class="aiReplayText textWrap"
        v-if="currentExamData() && currentExamData().aiReplayHtml"
        :source="currentExamData().aiReplayHtml"
      />
    </view>

    <view v-else class="chatExamCard-topTab">
      <view v-if="tabs && tabs.length > 1" class="chatExamCard-topTab-tab">
        <view
          class="item"
          v-for="(value, index) in tabs"
          :key="index"
          :class="{ itemSelect: index == tabIndex }"
          @tap="tabsClick(value)"
        >
          {{ value.name }}
        </view>
      </view>

      <scroll-view
        v-if="currentExamData()"
        class="chatExamCardScrollView"
        scroll-y="true"
        enable-flex="true"
        scroll-with-animation="true"
      >
        <ExamCard :isFromConversation="true" :data="currentExamData()" />
      </scroll-view>

      <view v-if="!currentExamData()" class="chatExamCard-loading">
        <up-loading-icon
          v-if="!requestComplete"
          text="加载中..."
          textSize="14"
          vertical="true"
          textColor="#999999"
        ></up-loading-icon>
        <view v-else class="chatExamCard-loading-retry">
          <view>加载试题失败</view>
          <view class="retryTitle" @tap="reLoadExam">重新发送</view>
          <image
            class="reSendIcon"
            src="@/pagesA/static/images/chat/chat_reSend.png"
            @tap="reLoadExam"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { extractedAudio } from "@/utils/audio";
import { KKConversationFrom } from "./conversitonEnum";
import UaMarkdown from "@/pagesA/components/ua-markdown/ua-markdown.vue";

import ExamCard from "../components/exam/examCard.vue";

import * as KKAswerApi from "@/api/answer";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  width: {
    type: String,
    default: "",
  },
  orgIds: {
    type: Array,
    default: () => [],
  },
});

const list = ref([]);
const tabIndex = ref(0);
const tabs = ref([]);
const requestComplete = ref(false);

const currentExamData = () => {
  if (tabIndex.value < list.value.length) {
    return list.value[tabIndex.value];
  }
  return null;
};

// tab点击
const tabsClick = (item: any) => {
  tabIndex.value = item.index;
};

const reLoadExam = () => {
  requestComplete.value = false;
  getExamDetailRequest();
};

// 获取试题详情
const getExamDetailRequest = async () => {
  if (props.data.aiExamList && props.data.aiExamList.length > 0) {
    list.value = props.data.aiExamList;
    list.value = extractedAudio(list.value);
    initExamTab();
    return;
  }
  let questionIds = [];
  if (props.data.questionIds instanceof Array) {
    questionIds = props.data.questionIds;
  } else {
    questionIds =
      props.data.questionIds && JSON.parse(props.data.questionIds || "[]");
  }
  const param = {
    questionIds: questionIds,
    orgIds: props.orgIds || [],
  };
  const data = (await KKAswerApi.getKqQuestionListProt(param).catch((err) => {
    requestComplete.value = true;
  })) as any;
  requestComplete.value = true;
  if (data && data.data && data.data.list) {
    list.value = data.data.list;
  }
  list.value = extractedAudio(list.value);
  initExamTab();
};

const initExamTab = () => {
  tabs.value = [];
  list.value.forEach((_, index) => {
    tabs.value.push({
      name: `试题${index + 1}`,
      index: index,
    });
  });
};

onMounted(() => {
  getExamDetailRequest();
});
</script>

<style lang="scss" scoped>
.chatExamCard {
  background: linear-gradient(270deg, #3d8eff 0%, #7835ff 100%);
  border-radius: 40rpx 8rpx 40rpx 40rpx;

  padding-bottom: 24rpx;
  &-topTab {
    padding-top: 24rpx;
    &-tab {
      margin-left: 12rpx;
      margin-right: 24rpx;
      margin-bottom: 32rpx;
      display: flex;
      flex-direction: row;
      height: 64rpx;
      .item {
        width: 138rpx;
        height: 64rpx;
        border-radius: 48rpx;
        background: #ffffff;
        border: 1rpx solid #e5e7eb;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 64rpx;
        text-align: center;
        margin-right: 8rpx;
      }
      .itemSelect {
        background: #e7f0ff;
        border: 1rpx solid #126efe;
        font-weight: 500;
        font-size: 28rpx;
        color: #126efe;
      }
    }
  }

  &-loading {
    margin-left: 12rpx;
    margin-right: 12rpx;
    min-height: 232rpx;
    background: #fff;
    border-radius: 32rpx 8rpx 32rpx 32rpx;
    display: flex;
    flex: column;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666666;
    line-height: 32rpx;
    text-align: left;
    &-retry {
      display: flex;
      flex: row;
      align-items: center;
      justify-content: center;

      .retryTitle {
        padding-left: 16rpx;
        padding-right: 16rpx;
        color: #eb2330;
      }

      .reSendIcon {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
  &-card {
    margin-top: 24rpx;
    margin-left: 12rpx;
    margin-right: 12rpx;
    border-radius: 8rpx 8rpx 32rpx 32rpx;
  }

  &-phonePhoto {
    padding-top: 24rpx;
    &-tab {
      margin-left: 12rpx;
      margin-right: 24rpx;
      margin-bottom: 32rpx;
      display: flex;
      flex-direction: row;
      height: 64rpx;
      .item {
        width: 138rpx;
        height: 64rpx;
        border-radius: 48rpx;
        background: #ffffff;
        border: 1rpx solid #e5e7eb;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 64rpx;
        text-align: center;
        margin-right: 8rpx;
      }
      .itemSelect {
        background: #e7f0ff;
        border: 1rpx solid #126efe;
        font-weight: 500;
        font-size: 28rpx;
        color: #126efe;
      }
    }
    &-noResult {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: auto;
      width: 270rpx;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      image {
        margin-top: 20rpx;
        width: 120rpx;
        height: 96rpx;
      }
      &-text {
        padding-top: 10rpx;
        padding-bottom: 20rpx;
        font-size: 24rpx;
        color: #999999;
        line-height: 27rpx;
        text-align: center;
      }
    }
    &-card {
      margin-top: 24rpx;
      margin-left: 12rpx;
      margin-right: 12rpx;
      border-radius: 8rpx 8rpx 32rpx 32rpx;
    }
  }
  .aiReplayText {
    padding-left: 24rpx;
    padding-right: 24rpx;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 38rpx;
  }
}
.chatExamCardOther {
  border-radius: 8rpx 38rpx 38rpx 38rpx;
}

.chatExamCardNoPhotoResult {
  background: transparent;
}
.chatExamCardScrollView {
  // max-height: 478rpx;
  padding-top: 0rpx;
  margin-top: -8rpx;
  margin-bottom: -8rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  width: calc(100% - 32rpx);
}
</style>
